  <!-- 业务单流程操作 任务提交 历史审批意见 查看流程图  -->
<template>
  <el-dialog
    title="业务单流程操作"
    :visible.sync="show"
    width="1700px"
    center
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="详细信息" name="detail" />
      <el-tab-pane label="任务审核" name="check" />
      <el-tab-pane label="审核历史" name="history" />
      <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
    </el-tabs>
    <div class="detail-tabs-content">
      <component :is="componentName" v-show="activeName === 'detail'" :opt-type="'detail'" :data="currentRow" :type="type" @viewDetail="viewDetail" />
      <el-form v-show="activeName === 'check'" ref="form" :rules="rules" style="padding-top: 10px;" :model="form" label-width="100px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="form.res">
            <el-radio label="通过" />
            <el-radio label="驳回" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="reason">
          <el-input v-model="form.reason" type="textarea" />
        </el-form-item>
        <!-- 如果没有审批人在这里加一个下拉框，选择审批人 -->
        <template v-if="nextDefineWorkflow && form.res!=='驳回'">
          <el-card class="box-card" style="margin-top:20px;margin-bottom:20px;">
            <div slot="header" class="clearfix">
              <span>请确定提交的环节审批人</span>
            </div>
            <el-table
              :data="tableData_sp"
            >
              <el-table-column
                prop="addWorkflowId"
                label="活动Id"
                width="180"
              />
              <el-table-column
                prop="name"
                label="活动名称"
                width="180"
              />
              <el-table-column
                prop="organizationName"
                label="机构名称"
              />
              <el-table-column
                prop="userName"
                label="审批人"
              />
            </el-table>
          </el-card>
          <div class="content-box">
            <div class="left-tree">
              <el-table
                ref="tabletreepeople"
                :data="treeData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                highlight-current-row
                default-expand-all
                :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}"
                @current-change="handleOrganizationClick"
              >
                <el-table-column
                  prop="name"
                  label="组织机构"
                />
              </el-table>
            </div>
            <div class="right-content">
              <div class="top-table-content">
                <com-table
                  ref="tableUser"
                  highlight-current-row
                  :data="tableData"
                  :columns="tableColumn"
                  :total="total"
                  :defaultrow="-1"
                  @pageChange="pageChange"
                  @change="handleUserClick"
                >
                  <template v-slot:sex="{row: {sex}}">
                    {{ sex ? '男' : '女' }}
                  </template>
                </com-table>
              </div>
            </div>
          </div>
        </template>
        <template v-if="currentRow.auditType == 1">
          <el-form-item label="">
            <el-button type="primary" :loading="loading" @click="submit">提 交</el-button>
          </el-form-item>
        </template>
      </el-form>
      <history v-show="activeName === 'history'" :data="currentRow" />
    </div>
  </el-dialog>
</template>

<script>
import {
  setWorkflowPass,
  setWorkflowFail,
  getNextWorkflow,
  getAddWorkflowDetail
} from '@/api/flow'
import {
  getOrganizationTree,
  getUserList
} from '@/api/manage'
export default {
  name: 'ProcessDetail',
  components: {
    // 审批历史
    history: () => import('./history'),
    // 客商管理
    companyStoreDetail: () => import('./detailTemplates/travellingTraderManage/companyStoreDetail.vue'),
    travellingTraderJudge: () => import('./detailTemplates/travellingTraderManage/travellingTraderJudge.vue'),
    // 招标管理
    bidInfo: () => import('./detailTemplates/bigManage/bidInfo.vue'),
    bidLimitInfo: () => import('./detailTemplates/bigManage/bidLimitInfo.vue'),
    bidTextInfo: () => import('./detailTemplates/bigManage/bidTextInfo.vue'),
    bidOpenInfo: () => import('./detailTemplates/bigManage/bidOpenInfo.vue'),
    // 合同管理
    generalContractSettleInfo: () => import('./detailTemplates/contractManage/generalContract/generalContractSettleInfo.vue'),
    transferContractReview: () => import('./detailTemplates/contractManage/transferContract/transferContractReview.vue'),
    transferContractInfo: () => import('./detailTemplates/contractManage/transferContract/transferContractInfo.vue'),
    transferContractSettleInfo: () => import('./detailTemplates/contractManage/transferContract/transferContractSettleInfo.vue'),
    materialContractReview: () => import('./detailTemplates/contractManage/materialContract/materialContractReview.vue'),
    materialContractInfo: () => import('./detailTemplates/contractManage/materialContract/materialContractInfo.vue'),
    materialContractInfoSettleInfo: () => import('./detailTemplates/contractManage/materialContract/materialContractInfoSettleInfo.vue'),
    deviceLeaseContractReview: () => import('./detailTemplates/contractManage/deviceContract/deviceLeaseContractReview.vue'),
    deviceLeaseContractInfo: () => import('./detailTemplates/contractManage/deviceContract/deviceLeaseContractInfo.vue'),
    deviceLeaseContractInfoSettleInfo: () => import('./detailTemplates/contractManage/deviceContract/deviceLeaseContractInfoSettleInfo.vue'),
    deviceStockContractReview: () => import('./detailTemplates/contractManage/deviceContract/deviceStockContractReview.vue'),
    deviceStockContractInfo: () => import('./detailTemplates/contractManage/deviceContract/deviceStockContractInfo.vue'),
    deviceStockContractInfoSettleInfo: () => import('./detailTemplates/contractManage/deviceContract/deviceStockContractInfoSettleInfo.vue'),
    otherContractReview: () => import('./detailTemplates/contractManage/otherContract/otherContractReview.vue'),
    otherContractInfo: () => import('./detailTemplates/contractManage/otherContract/otherContractInfo.vue'),
    otherContractInfoSettleInfo: () => import('./detailTemplates/contractManage/otherContract/otherContractInfoSettleInfo.vue'),
    // 计划管理
    projectDailyRecord: () => import('./detailTemplates/planManage/projectDailyRecord.vue'),
    projectFundPushPopInfo: () => import('./detailTemplates/planManage/projectFundPushPopInfo.vue'),
    projectSchedulePlanInfo: () => import('./detailTemplates/planManage/projectSchedulePlanInfo.vue'),
    projectScheduleStatInfo: () => import('./detailTemplates/planManage/projectScheduleStatInfo.vue'),
    projectTotalCostPlanInfo: () => import('./detailTemplates/planManage/projectTotalCostPlanInfo.vue'),
    // 资金管理
    bankExternalPaymentInfo: () => import('./detailTemplates/moneyManage/bankExternalPaymentInfo.vue'),
    bankInternalPaymentInfo: () => import('./detailTemplates/moneyManage/bankInternalPaymentInfo.vue'),
    otherPaymentInfo: () => import('./detailTemplates/moneyManage/otherPaymentInfo.vue'),
    projectBankCollection: () => import('./detailTemplates/moneyManage/projectBankCollection.vue'),
    projectFundPlanInfo: () => import('./detailTemplates/moneyManage/projectFundPlanInfo.vue'),
    reservePaymentInfo: () => import('./detailTemplates/moneyManage/reservePaymentInfo.vue'),
    // 材料管理
    consumableInventoryListInfo: () => import('./detailTemplates/materialManage/consumableInventoryListInfo.vue'),
    materialRequisitionFormInfo: () => import('./detailTemplates/materialManage/materialRequisitionFormInfo.vue'),
    projectPurchaseStorehouseInfo: () => import('./detailTemplates/materialManage/projectPurchaseStorehouseInfo.vue'),
    tempPurchaseStorehouseInfo: () => import('./detailTemplates/materialManage/tempPurchaseStorehouseInfo.vue'),
    // 周转材
    recyclingMaterialReceipt: () => import('./detailTemplates/materialManage/recyclingMaterialReceipt.vue'),
    recyclableMaterialBackForm: () => import('./detailTemplates/materialManage/recyclableMaterialBackForm.vue'),
    turnoverMaterialInventory: () => import('./detailTemplates/materialManage/turnoverMaterialInventory.vue'),
    // tempPurchaseStorehouseInfo: () => import('./detailTemplates/materialManage/tempPurchaseStorehouseInfo.vue'),
    // 易耗品管理
    deviceAllocationInfo: () => import('./detailTemplates/consumableManage/deviceAllocationInfo.vue'),
    machineTransferOut: () => import('./detailTemplates/consumableManage/machineTransferOut.vue'),
    machineTransferIn: () => import('./detailTemplates/consumableManage/machineTransferIn.vue'),
    deviceConfigPlanInfo: () => import('./detailTemplates/consumableManage/deviceConfigPlanInfo.vue'),
    deviceScrapHandleInfo: () => import('./detailTemplates/consumableManage/deviceScrapHandleInfo.vue'),
    deviceScrapPlanInfo: () => import('./detailTemplates/consumableManage/deviceScrapPlanInfo.vue'),
    // 竣工管理
    completionDelivery: () => import('./detailTemplates/completedManage/completionDelivery.vue'),
    completionSettlement: () => import('./detailTemplates/runManage/amountManage/completionSettlement.vue'),
    costSettlement: () => import('./detailTemplates/runManage/amountManage/costSettlement.vue'),
    // 自营管理
    runsaleContractReview: () => import('./detailTemplates/runManage/saleContractReview.vue'),
    saleContract: () => import('./detailTemplates/runManage/saleContract.vue'),
    saleContractSettleInfo: () => import('./detailTemplates/runManage/saleContractSettleInfo.vue'),
    runlaborContractReview: () => import('./detailTemplates/runManage/laborContractReview.vue'),
    runtransferContractInfo: () => import('./detailTemplates/runManage/transferContractInfo.vue'),
    runtransferContractSettleInfo: () => import('./detailTemplates/runManage/transferContractSettleInfo.vue'),
    runmaterialContractReview: () => import('./detailTemplates/runManage/materialContractReview.vue'),
    runmaterialContractInfo: () => import('./detailTemplates/runManage/materialContractInfo.vue'),
    runmaterialContractInfoSettleInfo: () => import('./detailTemplates/runManage/materialContractInfoSettleInfo.vue'),
    runmachineDeviceStockContractReview: () => import('./detailTemplates/runManage/machineDeviceStockContractReview.vue'),
    rundeviceStockContractInfo: () => import('./detailTemplates/runManage/deviceStockContractInfo.vue'),
    rundeviceStockContractPayment: () => import('./detailTemplates/runManage/deviceStockContractSettleInfo.vue'),
    runmachineDeviceLeaseContractReview: () => import('./detailTemplates/runManage/machineDeviceLeaseContractReview.vue'),
    rundeviceLeaseContractInfo: () => import('./detailTemplates/runManage/deviceLeaseContractInfo.vue'),
    rundeviceLeaseContractPayment: () => import('./detailTemplates/runManage/deviceLeaseContractSettleInfo.vue'),
    runotherContractReview: () => import('./detailTemplates/runManage/otherContractReview.vue'),
    runotherContractInfo: () => import('./detailTemplates/runManage/otherContractInfo.vue'),
    runotherContractPayment: () => import('./detailTemplates/runManage/otherContractPayment.vue'),
    runprojectFundPlanInfo: () => import('./detailTemplates/runManage/amountManage/projectFundPlanInfo.vue'),
    runbankInternalPaymentInfo: () => import('./detailTemplates/runManage/amountManage/bankInternalPaymentInfo.vue'),
    runbankExternalPaymentInfo: () => import('./detailTemplates/runManage/amountManage/bankExternalPaymentInfo.vue'),
    runreservePaymentInfo: () => import('./detailTemplates/runManage/amountManage/reservePaymentInfo.vue'),
    runotherPaymentInfo: () => import('./detailTemplates/runManage/amountManage/otherPaymentInfo.vue'),
    runprojectBankCollection: () => import('./detailTemplates/runManage/amountManage/projectBankCollection.vue')

  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'detail',
      form: {
        res: '通过',
        reason: ''
      },
      rules: {
        reason: [
          { required: true, message: '请输入审核意见', trigger: 'change' }
        ]
      },
      organizationId: null, // 审批人的机构Id
      userId: null, // 审批人的用户Id
      loading: false,
      nextDefineWorkflow: null,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      tableData_sp: [],
      total: 0,
      treeData: [], // 树列表
      tableData: [], // 表格列表
      selectRow: null, // 选中的数据
      directCurrentNode: null, // 选中的目录
      addObjname: null,
      tableColumn: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '账号',
          prop: 'account'
        },
        {
          label: '工号',
          prop: 'number'
        },
        {
          label: '性别',
          prop: 'sex',
          slot: 'sex'
        }
      ],
      userList: [],
      selectUser: ''
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    },
    // 客商管理类型对应菜单
    type() {
      const types = {
        '分包队伍': '1',
        '材料供应商': '2',
        '设备供应商': '3',
        '其他供应商': '4',
        '分包队伍评定': '1',
        '材料供应商评定': '2',
        '设备供应商评定': '3',
        '其他供应商评定': '4'
      }
      const { menu } = this.currentRow
      return menu ? types[menu] : ''
    },
    // 动态组件名
    componentName() {
      const componentMenus = {
        '客商管理-分包队伍': 'companyStoreDetail',
        '客商管理-材料供应商': 'companyStoreDetail',
        '客商管理-设备供应商': 'companyStoreDetail',
        '客商管理-其他供应商': 'companyStoreDetail',
        '客商管理-分包队伍评定': 'travellingTraderJudge',
        '客商管理-材料供应商评定': 'travellingTraderJudge',
        '客商管理-设备供应商评定': 'travellingTraderJudge',
        '客商管理-其他供应商评定': 'travellingTraderJudge',
        '招标管理-招标信息': 'bidInfo',
        '招标管理-招标限价': 'bidLimitInfo',
        '招标管理-招标文本': 'bidTextInfo',
        '招标管理-开标纪要': 'bidOpenInfo',
        // 修改模板--start
        '合同管理-总承包合同结算与支付': 'generalContractSettleInfo',
        '合同管理-劳务分包合同评审': 'transferContractReview',
        '合同管理-劳务分包合同批后存档': 'transferContractInfo',
        '合同管理-劳务分包合同结算': 'transferContractSettleInfo',
        '合同管理-材料采购合同评审': 'materialContractReview',
        '合同管理-材料采购合同批后存档': 'materialContractInfo',
        '合同管理-材料采购合同结算': 'materialContractInfoSettleInfo',
        '合同管理-设备采购合同评审': 'deviceStockContractReview',
        '合同管理-设备采购合同批后存档': 'deviceStockContractInfo',
        '合同管理-设备采购合同结算': 'deviceStockContractInfoSettleInfo',
        '合同管理-设备租赁合同评审': 'deviceLeaseContractReview',
        '合同管理-设备租赁合同批后存档': 'deviceLeaseContractInfo',
        '合同管理-设备租赁合同结算': 'deviceLeaseContractInfoSettleInfo',
        '合同管理-其他合同评审': 'otherContractReview',
        '合同管理-其他合同批后存档': 'otherContractInfo',
        '合同管理-其他合同结算': 'otherContractInfoSettleInfo',
        // 修改模板--end

        '计划管理-项目施工日志': 'projectDailyRecord',
        '计划管理-项目总成本计划': 'projectTotalCostPlanInfo',
        '计划管理-项目月成本进度计划': 'projectSchedulePlanInfo',
        '计划管理-项目月进度统计': 'projectScheduleStatInfo',
        '计划管理-项目资金投入及回收计划': 'projectFundPushPopInfo',
        '资金管理-项目月度资金计划': 'projectFundPlanInfo',
        '资金管理-银行对内支付': 'bankInternalPaymentInfo',
        '资金管理-银行对外支付': 'bankExternalPaymentInfo',
        '资金管理-备用金支付': 'reservePaymentInfo',
        '资金管理-其他资金支付': 'otherPaymentInfo',
        '资金管理-项目银行收款台账': 'projectBankCollection',
        '材料及低值易耗品管理-项目自购入库': 'projectPurchaseStorehouseInfo',
        '材料及低值易耗品管理-临时采购入库': 'tempPurchaseStorehouseInfo',
        '材料及低值易耗品管理-消耗材领用单': 'materialRequisitionFormInfo',
        '材料及低值易耗品管理-消耗材盘点单': 'consumableInventoryListInfo',
        '材料及低值易耗品管理-周转材领用单': 'recyclingMaterialReceipt',
        '材料及低值易耗品管理-周转材归还单': 'recyclableMaterialBackForm',
        '材料及低值易耗品管理-周转材盘点单': 'turnoverMaterialInventory',
        '机械设备管理-机械设备配置计划': 'deviceConfigPlanInfo',
        '机械设备管理-机械处调入': 'machineTransferIn',
        '机械设备管理-机械处调出': 'machineTransferOut',
        '机械设备管理-机械设备报废计划': 'deviceScrapPlanInfo',
        '机械设备管理-机械设备报废处理': 'deviceScrapHandleInfo',
        // 模板修改-start
        '自营管理-销售合同评审': 'runsaleContractReview',
        '自营管理-销售合同批后存档': 'saleContract',
        '自营管理-销售合同结算与支付': 'saleContractSettleInfo',
        '自营管理-劳务合同评审': 'runlaborContractReview',
        '自营管理-劳务合同批后存档': 'runtransferContractInfo',
        '自营管理-劳务合同结算': 'runtransferContractSettleInfo',
        '自营管理-材料合同评审': 'runmaterialContractReview',
        '自营管理-材料合同批后存档': 'runmaterialContractInfo',
        '自营管理-材料合同结算': 'runmaterialContractInfoSettleInfo',
        '自营管理-机械设备采购合同评审': 'runmachineDeviceStockContractReview',
        '自营管理-机械设备采购合同批后存档': 'rundeviceStockContractInfo',
        '自营管理-机械设备采购合同结算': 'rundeviceStockContractPayment',
        '自营管理-机械设备租赁合同评审': 'runmachineDeviceLeaseContractReview',
        '自营管理-机械设备租赁合同批后存档': 'rundeviceLeaseContractInfo',
        '自营管理-机械设备租赁合同结算': 'rundeviceLeaseContractPayment',
        '自营管理-其他合同评审': 'runotherContractReview',
        '自营管理-其他合同批后存档': 'runotherContractInfo',
        '自营管理-其他合同结算': 'runotherContractPayment',
        '自营管理-项目月度资金计划': 'runprojectFundPlanInfo',
        '自营管理-银行对内支付': 'runbankInternalPaymentInfo',
        '自营管理-银行对外支付': 'runbankExternalPaymentInfo',
        '自营管理-备用金支付': 'runreservePaymentInfo',
        '自营管理-其他资金支付': 'runotherPaymentInfo',
        '自营管理-项目银行收款台账': 'runprojectBankCollection',
        // 模板修改-end
        '竣工管理-竣工交付审计': 'completionDelivery',
        '竣工管理-竣工结算': 'completionSettlement',
        '竣工管理-成本结算': 'costSettlement'
      }
      const { menu } = this.currentRow
      return menu ? componentMenus[menu] : ''
    }
  },
  watch: {
    showModal: {
      handler(newData) {
        this.activeName = 'detail'
        this.getNext()
        this.form.reason = ''
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    // 获取添加流程列表
    getAddWorkflowList() {
      const row = this.currentRow
      getAddWorkflowDetail({ menu: row.menu }).then(res => {
        if (res.code === '0001' && res.data) {
          if (res.data.lstDefineWorkflow) {
            this.tableData_sp = res.data.lstDefineWorkflow
          }
        }
      })
    },
    viewDetail() {
      this.show = false
      this.$emit('freshList')
    },
    pageChange(data) {
      this.pageParams = data
      this.getTableList(this.directCurrentNode)
    },
    // 获取树结构目录
    initTree() {
      getOrganizationTree().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
        if (nodes && nodes.length > 0) {
          this.setOrganizationRow(this.treeData)
        }
      })
    },
    setOrganizationRow(allOrganization) {
      allOrganization.forEach(item => {
        if (item.nodes.length > 0) {
          this.setOrganizationRow(item.nodes)
        }
        if (item.id === this.organizationId) {
          this.$nextTick(() => {
            this.$refs.tabletreepeople.setCurrentRow(item)
          })
          this.directCurrentNode = item
          this.getTableList(item)

          return
        }
      })
    },
    setUserRow(allUser) {
      if (!this.userId) {
        return
      }
      allUser.forEach(item => {
        if (item.id === this.userId) {
          this.$nextTick(() => {
            this.$refs.tableUser.$refs.table.setCurrentRow(item)
          })
          this.selectRow = item

          return
        }
      })
    },
    // 目录相关
    handleOrganizationClick(val) {
      if (this.organizationId) {
        this.setOrganizationRow(this.treeData)

        return
      }
      // 拿到机构信息
      this.directCurrentNode = val
      this.getTableList(val)
    },
    // 拿到具体的人员信息
    handleUserClick(val) {
      if (this.userId) {
        this.setUserRow(this.tableData)

        return
      }
      // if (val.organizationId === this.selectRow.organizationId && val.id === this.selectRow.id) {
      //   this.defaultrow = -1
      //   return
      // }
      this.selectRow = val
    },
    // 获取材料表格数据
    getTableList(data) {
      const { id } = data
      if (id) {
        const params = {
          ...this.pageParams,
          organizationId: id
        }
        getUserList(params).then(res => {
          const { data, total } = res.data || {}
          if (data) {
            this.tableData = res.data.data
            this.total = total - 0
            this.setUserRow(this.tableData)
          }
        })
      }
    },
    // 通过时
    getNext() {
      this.loading = true
      const { id } = this.currentRow
      if (!id) return
      const params1 = {
        startWorkflowId: id
      }
      getNextWorkflow(params1).then(res => {
        this.loading = false
        const { code } = res
        if (code === '0001') {
          this.nextDefineWorkflow = res.data
          this.userId = this.nextDefineWorkflow.userId
          this.organizationId = this.nextDefineWorkflow.organizationId
          this.initTree()
          this.getAddWorkflowList()
        } else {
          // this.$message.error(msg || '获取失败')
        }
      }).catch(() => {
        this.loading = false
      })
    },
    submit() {
      // 这里需要判断是否选择了人员，没有选择的话需要选择下
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { res, reason } = this.form
          const { id } = this.currentRow
          if (!this.nextDefineWorkflow || this.form.res === '驳回') {
            console.log('nextDefineWorkflow为null===' + this.form.res)
            const params = {
              startWorkflowId: id,
              description: reason
            }
            this.finalFn(params, res)
            return
          } else {
            console.log('nextDefineWorkflow不为空===' + this.form.res)
            const selectOrganization = this.directCurrentNode

            if (!selectOrganization) {
              return this.$message.error('请选择机构！')
            }

            const selectUser = this.selectRow

            if (!selectUser) {
              return this.$message.error('请选择用户！')
            }

            const userId = selectUser.id
            const userName = selectUser.name
            const organizationId = selectOrganization.id
            const organizationName = selectOrganization.name

            const params = {
              userId: userId,
              userName: userName,
              organizationId: organizationId,
              organizationName: organizationName,
              startWorkflowId: id,
              description: reason
            }
            this.finalFn(params, res)
          }
        }
      })
    },
    finalFn(params, res) {
      const fn = res === '通过' ? setWorkflowPass : setWorkflowFail
      this.loading = true
      fn(params).then(res => {
        this.loading = false
        const { code, msg } = res
        if (code === '0001') {
          this.$message.success('保存成功')
          this.show = false
          this.$emit('freshList')
        } else {
          this.$message.error(msg || '保存失败')
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .com-form-title{
//   font-size: 14px;
//   font-weight: bold;
//   line-height: 35px;
//   color: #409EFF;
//   border-bottom: 1px solid #dedede;
//   margin-bottom: 6px;
// }
.detail-tabs-content{
  min-height: 400px;
  max-height: 700px;
  overflow: auto;
}
// .input-field{
//   width: 100%;
//   display: flex;
//   line-height: 32px;
//   .input-label{
//     width: 150px;
//     text-align: right;
//     line-height: 32px;
//   }
//   .input-content{
//     width: 400px;
//   }
// }
::v-deep .content-box{
  overflow: hidden;
  .left-tree{
    width: 200px;
    float: left;
    max-height:600px;
    overflow-y: auto;
  }
  .right-content{
    width: calc(100% - 210px);
    float: right;
    .top-table-content{
      min-height: 200px;
    }
    // .action-btns{
    //   padding: 10px;
    // }
    .bottom-table-content{
      min-height: 200px;
    }
  }
}
</style>
